<template>
	<view class="legalPerson">
		<!-- <view class="title">
			身份认证
		</view> -->
		<view class="idCard-images-wrapper">
			<view class="title">
				身份证图片
			</view>
			<view class="item-wrapper">
				<view class="item">
					<view class="item-img" @click="uploadIDCard(0)">
						<image v-if="idCardFront" :src="idCardFront" class="img" mode="scaleToFill"></image>
						<image v-else class="img"
							src="https://cdpresources.hobon.cc/supplier-mini-program/static/idCard_front.png"
							mode="scaleToFill"></image>
					</view>
					<text class="label">人面像</text>
				</view>
				<view class="item">
					<view class="item-img" @click="uploadIDCard(1)">
						<image v-if="idCardBack" :src="idCardBack" class="img" mode="scaleToFill"></image>
						<image v-else class="img"
							src="https://cdpresources.hobon.cc/supplier-mini-program/static/idCard_back.png"
							mode="scaleToFill"></image>
					</view>
					<text class="label">国徽面</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="item">
				<view class="label">
					真实姓名
				</view>
				<view class="value">
					<input type="text" v-model="realName" placeholder="请输入真实姓名" class="input">
				</view>
			</view>
			<view class="item">
				<view class="label">
					身份证号
				</view>
				<view class="value">
					<input type="text" v-model="idCard" placeholder="请输入身份证号" class="input">
				</view>
			</view>
			<view class="item">
				<view class="label">
					有效期
				</view>
				<view class="value" style="margin-left: 30rpx;">
					<uni-datetime-picker placeholder="开始日期" :border="false" type="date" :clear-icon="false"
						v-model="startDate" />
					<text style="margin: 0 30upx 0 10px;">至</text>
					<uni-datetime-picker placeholder="结束日期" :border="false" type="date" :clear-icon="false"
						v-model="endDate" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					地址
				</view>
				<view class="value">
					<textarea type="text" v-model="address" placeholder="请输入地址" class="textarea"></textarea>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	//import api from '@/api/requestForNvue.js'
	import {
		pathToBase64
	} from 'image-tools'

	export default {
		data() {
			return {
				idCardFront: '',
				idCardBack: '',
				realName: '',
				idCard: '',
				startDate: '',
				endDate: '',
				address: '',
				type: 0,
				info: {},
				disabled: false
			}
		},
		onLoad(option) {
			this.info = JSON.parse(option.info);
			this.idCardFront = this.info.idCardImageFront;
			this.idCardBack = this.info.idCardImageBack;
			this.realName = this.info.realName;
			this.idCard = this.info.idCardNumber;
			this.startDate = this.info.idCardPeriodStart;
			this.endDate = this.info.idCardPeriodEnd;
			this.address = this.info.address;
		},
		computed: {},
		methods: {
			uploadIDCard(type) {
				const _this = this;
				this.type = type;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async function(res) { //idCard //bankCard //businessLicense
						_this.upload(res.tempFilePaths[0])
					}
				});
			},
			async upload(path) {
				const _this = this;
				const url = await _this.$uploadFn(path, 0, 'idCard', 0, true, false);
				const base64 = await pathToBase64(path);
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.remove(function(e) {
						console.log("删除成功");
					}, function(e) {
						console.log("删除失败");
					});
				});
				const data = await this.$api.post('/adm/ocr', {
					ocrImgData: base64.replace('data:image/jpeg;base64,', ''),
					ocrType: 0
				})
				if (data.code === 200) {
					const info = JSON.parse(data.data)
					if (this.type === 0) {
						_this.realName = info.Name;
						_this.idCard = info.IdNum;
						_this.idCardFront = url;
						_this.address = info.Address;
					} else {
						const validDates = info.ValidDate.split('-');
						_this.startDate = validDates[0].replace('.', '-').replace('.', '-');
						_this.endDate = validDates[1].replace('.', '-').replace('.', '-');
						_this.idCardBack = url;
					}
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none',
						duration: 2500
					})
				}
			},
			async submit() {
				if (this.disabled) return
				if (!this.idCardFront) {
					uni.showToast({
						title: '请上传身份证人面像',
						icon: 'none'
					})
					return
				}
				if (!this.idCardBack) {
					uni.showToast({
						title: '请上传身份证国徽面',
						icon: 'none'
					})
					return
				}
				if (!this.realName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}
				if (!this.idCard) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return
				}
				if (!this.startDate) {
					uni.showToast({
						title: '请选择身份证有效日期开始日期',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				this.disabled = true;
				const infoData = {
					idCardImageBack: this.idCardBack,
					idCardImageFront: this.idCardFront,
					idCardNumber: this.idCard,
					idCardPeriodEnd: this.endDate,
					idCardPeriodStart: this.startDate,
					realName: this.realName,
					supplierId: this.info.supplierId,
					address: this.address
				}
				let data;
				if (this.info.supplierId) {
					if (this.info.id) {
						infoData.id = this.info.id;
						data = await this.$api.put('/adm/supplier-legal', infoData)
					} else {
						data = await this.$api.post('/adm/supplier-legal', infoData)
					}
				}
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				if (prevPage == undefined || prevPage == null) return;
				prevPage.$vm.setLegalData(infoData);
				uni.navigateBack();
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.legalPerson {
		height: 100%;
		overflow: auto;
		padding-bottom: 150rpx;

		.idCard-images-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx;
			padding: 20upx 0;

			.title {
				font-size: 32upx;
				margin: 20upx;
			}

			.item-wrapper {
				display: flex;

				.item {
					flex: 1;
					text-align: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10upx;

					.item-img {
						width: 100%;
						height: 220upx;
						position: relative;
						border-radius: 10upx;
						overflow: hidden;

						.img {
							width: 100%;
							height: 220upx;
						}

						.img-shadow {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							background-color: rgba(0, 0, 0, .1);
						}

						.icon {
							position: absolute;
							z-index: 2;
							font-weight: bold;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}

					.label {
						margin-top: 10upx;
					}

				}
			}
		}

		.accredit-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx;
			padding: 20upx 0;

			.title {
				font-size: 32upx;
				margin: 20upx;
			}

			.upload-wrapper {
				display: flex;

				.upload-image {
					width: 300upx;
					height: 260upx;
					margin: 0 20upx;
					background-color: #ababab;
					border-radius: 10upx;

					.img {
						width: 100%;
						height: 260upx;
						border: 1upx solid #dedede;
						border-radius: 10upx;
					}

					.upload {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						height: 260upx;

						.text {
							font-size: 32upx;
							color: #ffffff;
							margin-top: 10upx;
						}
					}
				}

				.upload-info {
					flex: 1;

					.download {
						color: #0E932E;
						font-size: 30upx;
						margin-bottom: 30upx;
					}

					.info {
						font-size: 26upx;
						margin-bottom: 10upx;
					}

					.more {
						margin-top: 20upx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #0E932E;
						font-size: 28upx;
					}
				}
			}
		}

		.form-wrapper {
			margin: 20upx 20upx;
			border-radius: 20upx;
			background-color: #ffffff;

			.item {
				min-height: 108upx;
				display: flex;
				align-items: center;
				padding: 0 20upx;
				border-top: 2upx solid #efefef;

				&:first-child {
					border-top: 0upx solid #efefef;
				}

				.label {
					color: #222222;
					font-size: 32upx;
				}

				.value {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.input {
						padding-left: 40upx;
						width: 100%;
						text-align: right;
					}

					.textarea {
						width: 500upx;
						height: 70upx;
						margin: 20upx 0;
						text-align: right;
					}
				}
			}
		}

		.tip-wrapper {
			font-size: 26upx;
			color: #666666;
			margin: 0 32upx;
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 98upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			background-color: #555BFF;
			transition: .1s linear;

			&:active {
				background-color: #555BFFDC;
			}
		}
	}
</style>